<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {margin: 0;padding: 0}
    </style>
</head>
<body>
    <div id="app">
        <v-damu>
            <template slot="span" slot-scope="{text}">
                <span>
                    {{msg}} <i style="color: red">{{text}}</i>
                </span>
            </template>

            <strong slot="strong" slot-scope="{text}">
                {{msg}} <i style="color: red">{{text}}</i>
            </strong>
            <i slot="i" slot-scope="{text}">
                {{msg}} <i style="color: red">{{text}}</i>
            </i>
        </v-damu>
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>
    // 插槽是一种父组件向子组件传递html片段的技术
    Vue.config.productionTip=false;
    new Vue({
        el:"#app",
        data:{msg:"app组件的msg"},
        components:{
            "v-damu":{
                template:`<div>
                            <div>damu-start</div>
                            <slot name="span" text="span-text"></slot>
                            <slot name="strong" text="strong-text"></slot>
                            <slot name="i" text="i-text"></slot>
                            <div>damu-end</div>
                          </div>`
            }
        }
    })
</script>
</html>